<template>
  <div>
    <Icon :size="22" :color="'red'"><AddCircle /></Icon>
    <hr />
    <c-icon :size="20" :color="'blue'"><AddCircle /></c-icon>
    <hr />
    <!-- 
    <c-tree
      :data="data"
      label-field="label"
      key-field="key"
      children-field="children"
      :default-expande-keys="['40']"
    >
    </c-tree> -->
    <hr />
    <!-- <Tree :data="data"></Tree> -->
    <hr />
    <!-- <c-tree :data="data" :on-load="handleLoad"></c-tree> -->
    <hr />
    <!-- <c-tree :data="data" v-model:selected-keys="value" selectable multiple>
      <template #default="{ node }">
        {{ node.key }} + {{ node.label }}
      </template>
    </c-tree> -->
    <!-- selectable 表示可以选中节点，multiple 表示可以选中多个节点 -->
  </div>
  <hr />
  <CheckBox model-value="true">爱好</CheckBox>
  <hr />
  <c-checkbox
    label="节点"
    v-model="check"
    :indeterminate="true"
    @change="handleChange"
  ></c-checkbox>
  <hr />
  <c-tree
    :data="data"
    v-model:selected-keys="value"
    selectable
    show-checkbox
    :default-checked-keys="['40', '41']"
  >
    <template #default="{ node }"> {{ node.key }} + {{ node.label }} </template>
  </c-tree>
  <hr />
  <About />
  <hr />
  <News />
  <hr />
  <Myself />
</template>

<script setup lang="ts">
import Icon from "@cp-ranmo/components/icon";
import Tree, { Key, TreeOption } from "@cp-ranmo/components/tree";
import CheckBox from "@cp-ranmo/components/checkbox";
import About from "./components/about.vue";
import News from "./components/news.vue";
import Myself from "./components/myself.vue";

import { AddCircle } from "@vicons/ionicons5";
import { ref } from "vue";
// console.log(Icon);
// console.log(Tree);

function createLabel(level: number) {
  if (level === 4) return "道生一";
  if (level === 3) return "一生二";
  if (level === 2) return "二生三";
  if (level === 1) return "三生万物";
}

function createData(level = 4, parentKey = ""): any {
  if (!level) return [];
  const arr = new Array(8 - level).fill(0);
  return arr.map((_, idx: number) => {
    const key = parentKey + level + idx;
    return {
      label: createLabel(level), // 显示内容
      key, // 唯一性
      children: createData(level - 1, key) // 孩子
    };
  });
}

// function createData() {
//   return [
//     {
//       label: nextLabel(),
//       key: 1,
//       isLeaf: false // 表示不是叶子节点，点击动态加载子节点
//     },
//     {
//       label: nextLabel(),
//       key: 2,
//       isLeaf: false
//     }
//   ];
// }

// 创建下一个节点
function nextLabel(currentLabel?: string | number): string {
  if (!currentLabel) return "Out of Tao, One is born";
  if (currentLabel === "Out of Tao, One is born") return "Out of One, Two";
  if (currentLabel === "Out of One, Two") return "Out of Two, Three";
  if (currentLabel === "Out of Two, Three") {
    return "Out of Three, the created universe";
  }
  if (currentLabel === "Out of Three, the created universe") {
    return "Out of Tao, One is born";
  }
  return "";
}

// 树数据
const data = ref(createData());

// const data = ref<TreeOption[]>([
//   {
//     key: "0",
//     label: "0",
//     children: [
//       {
//         key: "0-0",
//         label: "0-0"
//       },
//       {
//         disabled: true,
//         key: "0-1",
//         label: "0-1",
//         children: [
//           {
//             label: "0-1-0",
//             key: "0-1-0"
//           },
//           {
//             label: "0-1-1",
//             key: "0-1-1"
//           }
//         ]
//       }
//     ]
//   },
//   {
//     key: "1",
//     label: "1",
//     children: [
//       {
//         key: "1-0",
//         label: "1-0"
//       },
//       {
//         checkboxDisabled: true,
//         key: "1-1",
//         label: "1-1",
//         children: [
//           {
//             label: "1-1-0",
//             key: "1-1-0"
//           },
//           {
//             label: "1-1-1",
//             key: "1-1-1"
//           }
//         ]
//       }
//     ]
//   }
// ]);

// 处理点击异步加载
const handleLoad = (node: TreeOption) => {
  // 内部根据需要展开的节点传递这里进行过来进行异步加载
  return new Promise<TreeOption[]>(resolve => {
    setTimeout(() => {
      resolve([
        // 此数据会当成点击元素展开的 node 的 children 属性
        {
          label: nextLabel(node.label),
          key: node.key + nextLabel(node.label),
          isLeaf: false
        }
      ]);
    }, 1000);
  });
};
// console.log(data.value);

const value = ref<Key[]>(["0"]);

// 可选框
const check = ref<boolean>(true);
const handleChange = (value: boolean) => {
  console.log(value);
};
</script>

<style scoped></style>
